<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

    <style type="text/css">
        body {
            padding-top: 50px;
        }

        div[class^=col] {
            padding: 10px
        }

        .item {
            height: 120px;
            border-radius: 4px;
            background: #eee;
            text-align: center;
        }

        .input-group-addon {
            cursor: pointer;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;

        }
    </style>
</head>
<script src="../../common.js" type="text/javascript" charset="utf-8"></script>
<script src="../../cookie.js" type="text/javascript" charset="utf-8"></script>
<script>
    var _tr = null;

    window.onload = function () {
        _tr = $("#table_data").children[0].children[1].cloneNode(true);
        refresh();
        // 实现+-号功能 ,使用事件委托
        $("#table_data").children[0].addEventListener("click", function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            // 通过indexOf 判断 点击的目标是+还是-
            if (target.className.indexOf("minus") != -1) {
                // 获得商品编号
                var _pcode = target.nextElementSibling.nextElementSibling.value;
                // 获取cookie中所有的商品
                var list = JSON.parse(getCookie("plist"));
                // 根据编号找到其下标,使用findIndex方法，返回满足条件的元素下标
                var index = list.findIndex(function (item) {
                    return item.pcode == _pcode;
                })
                // 减到0 商品移除
                if (--list[index].count == 0) {
                    list.splice(index, 1);
                }
                target.nextElementSibling.value = list[index] ? list[index].count : 0;

            } else if (target.className.indexOf("add") != -1) {
                // 获得商品编号
                var _pcode = target.previousElementSibling.value;
                // 获取cookie中所有的商品
                var list = JSON.parse(getCookie("plist"));
                // 根据编号找到其下标,使用findIndex方法，返回满足条件的元素下标
                var index = list.findIndex(function (item) {
                    return item.pcode == _pcode;
                })
                // 减到0 商品移除
                list[index].count++;

            }
            if (target.className.indexOf("delete") != -1) {
                var tr = target.parentNode.parentNode;
                 // 获得商品编号
                 var _pcode = tr.children[2].children[0].children[2];
                // 获取cookie中所有的商品
                var list = JSON.parse(getCookie("plist"));
                // 根据编号找到其下标,使用findIndex方法，返回满足条件的元素下标
                var index = list.findIndex(function (item) {
                    return item.pcode == _pcode;
                })
                list.splice(index,1);
              
                
                
             }
             addCookie("plist",JSON.stringify(list));
             refresh();
        });
        function refresh() {
            var tbody = $("#table_data").children[0];
            // 保存一下表头
            var thead = tbody.children[0].cloneNode(true);
            // 清空数据
            tbody.innerHTML = "";
            tbody.appendChild(thead);

            var list = JSON.parse(getCookie("plist"));
            list.forEach(function (goods) {
                var newtr = _tr.cloneNode(true);
                newtr.children[0].children[0].innerText = goods.pname;
                newtr.children[1].children[0].innerText = goods.price;
                newtr.children[2].children[0].children[1].value = goods.count;
                newtr.children[2].children[0].children[2].value = goods.pcode;
                tbody.appendChild(newtr);
            });
        }
    }
</script>

<body>
    <div class="container">
        <div class="col-lg-8">
            <table id="table_data" class="table table-hover">
                <tr>
                    <td class="active">商品名称</td>
                    <td class="success">商品价格</td>
                    <td class="warning">商品数量</td>
                    <td class="danger">operation</td>
                </tr>
                <tr>
                    <td class="text-center">
                        <h5>商品2</h5>
                    </td>
                    <td class="text-center">
                        <h5>$999</h5>
                    </td>
                    <td class="text-center" style="width:150px">
                        <div class="input-group">
                            <span class="minus input-group-addon input-sm">-</span>
                            <input type="text" class="form-control" placeholder="Amount">
                            <input type="hidden" value="" />
                            <span class="add input-group-addon input-sm">+</span>
                        </div>
                    </td>
                    <td class="text-center">
                        <button class="btn btn-danger btn-sm delete" href="#">删除</button>
                    </td>
                </tr>
            </table>
            <hr>
            <div class="text-center">
                <a class="btn btn-primary btn-lg">提交订单</a>
            </div>
        </div>
    </div>
</body>

</html>